{% extends 'layout/basic.html'%}
{% load static %}
    {% block title %}
        DATA
    {% endblock %}
    {% block css %}
        <style>
        .container {
            display: flex;
        }
        .left-column {
            flex: 1;
            {#align-content: center;#}
            {#width: 400px;#}
            {#height: 300px;#}
            {#background-color: lightgray;#}
            position: relative;
        }
        .right-column {
            flex: 1;
            width:50%;
        }
        .box1 {
            width: 350px;
            height: 300px;
            {#background-color: teal;#}
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid black;
            border-radius: 5% 5% 5% 5%;
        }
        .box2 {
            width: 300px;
            height: 180px;
            {#background-color: teal;#}
            position: absolute;
            top: 95%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            background-color: antiquewhite;
            {#padding: 10px;#}
            {#margin: 10px;#}
        }
        .box3 {
            border: 5px solid black;
            border-radius: 10% 10% 10% 10%;
            height: 450px;
        }
    </style>
    {% endblock %}
    {% block js %}
    <script src="{% static "plugins/echars/echarts.min.js" %}"></script>
     <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var data24Chart = echarts.init(document.getElementById('data24'));
      var day24TasksName=[]
      var taskNameStr="{{ day24TasksName }}"
      day24TasksName=taskNameStr.split(',')
      var day24TasksTime=[]
      day24TasksTime={{ day24TasksTime }}
      var pieData=[]
      for (var i=0;i<day24TasksName.length;i++){
        pieData.push({value:day24TasksTime[0],name:day24TasksName[i]})
      }
      // 指定图表的配置项和数据
      var option1 = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '80%',
      data: pieData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
      // 使用刚指定的配置项和数据显示图表。
      data24Chart.setOption(option1);
      var data7dayChart = echarts.init(document.getElementById('data7day'));
      var weekTimeArr={{weekTime}}
      console.log(weekTimeArr)
      var option2 = {
  xAxis: {
    type: 'category',
    data: ['6天前', '5天前', '4天前', '3天前', '2天前', '1天前', '今天']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: weekTimeArr,
      type: 'line'
    }
  ]
};
      data7dayChart.setOption(option2);
    </script>
    {% endblock %}
    {% block content %}
      <div class="container">
        <div class="left-column">
                <!-- 左边第一个div的内容 -->
            <div class="box1">
                <div id="data24" style="width: 350px;height:300px;"></div>
                <p>24小时</p>
            </div>
            <div class="box2">
                <p>当日总结：</p>
                <!-- 左边第二个div的内容 -->
                <p>{{ dayDes }}</p>
            </div>
        </div>
        <div class="right-column">
            <div class="box3">
                <!-- 右边的div的内容 -->
                <div id="data7day" style="width: 100%;height:450px;"></div>
                <p>最近七天学习时长</p>
            </div>
        </div>
    </div>
    {% endblock %}
